<template>
	<!-- #ifdef MP-WEIXIN -->
		<uv-navbar
		  :fixed="true"
		  :title="title"
		  left-arrow
		  @leftClick="$onClickLeft"
		/>
	<!-- #endif -->
		<view class="top" >
			<button type="primary" size="default" class="login-btn" @click="logout" :loading="isLoading">
				{{ isLoading ? '退出中...' : '确定退出登录' }}
			</button>
			<uv-toast ref="uToast"></uv-toast>
		</view>
	<!-- </layout> -->
</template>

<script setup>
import {
  ref
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { userLogout } from '@/api/auth'
import { useNavbarHeight } from '@/hooks/useNavbar'

const main = useMainStore()
const { member, isLogin } = storeToRefs(main)
const uToast = ref()
const title = ref('退出')
const isLoading = ref(false)

// 获取导航栏高度
const { navbarHeightCss } = useNavbarHeight()

// 返回上一页
const $onClickLeft = () => {
	uni.navigateBack()
}

const logout = async () => {
	if (isLoading.value) return;
	
	try {
		isLoading.value = true;
		console.log('用户点击退出登录');
		
		// 显示退出提示
		uToast.value.show({
			message: '正在退出...',
			type: 'loading'
		});
		
		// 调用后端退出接口
		try {
		    const result = await userLogout();
		    console.log('后端退出接口调用成功:', result);
		} catch (error) {
		    console.log('后端退出接口调用失败，但继续执行本地退出:', error);
		}
		
		// 调用store中的logout方法
		main.logout();
		
		// 显示成功提示
		uToast.value.show({
			message: '已退出登录',
			type: 'success'
		});
		
		// 延迟返回，让用户看到成功提示
		setTimeout(() => {
			console.log('退出登录完成，返回上一页');
			uni.navigateBack();
		}, 1500);
		
	} catch (error) {
		console.error('退出登录过程中出现错误:', error);
		
		// 即使出错也要清除本地数据
		main.logout();
		
		uToast.value.show({
			message: '退出登录完成',
			type: 'success'
		});
		
		setTimeout(() => {
			uni.navigateBack();
		}, 1500);
		
	} finally {
		isLoading.value = false;
	}
}
	
</script>

<style lang="scss" scoped>
	
	.top {
		display: flex; 
		height: 100%;
	}
	button{
		 margin: auto;
	}
</style>
